<!-- Created by henian.xu on 2018/8/26. -->

<template>
    <div
        class="cell-item"
        :class="[{reverse},{'flex-reverse':flexReverse},{'link':hasLink},{disabled}]"
        v-bind="linkerProps"
        v-on="disabled?{}:$listeners"
    >
        <!--<slot>-->
        <Label v-bind="__labelProps">
            <template slot="icon">
                <slot name="icon"/>
            </template>
            <template slot="inner">
                <slot name="inner"/>
            </template>
            <template slot="label">
                <slot name="label"/>
            </template>
            <template slot="subLabel">
                <slot name="subLabel"/>
            </template>
            <slot/>
        </Label>
        <slot name="extra">
            <div 
                class="extra" 
                v-if="extra"
            >{{ extra }}</div>
        </slot>
        <slot name="badge">
            <Badge
                v-if="badge!==false"
                :label="badge"
                :size="badge&&'small'"
            />
        </slot>
        <!--</slot>-->
    </div>
</template>

<script>
import linkerMixin from '@/mixins/linker';
import labelMixin from '@/components/label/labelMixin';

export default {
    name: 'Cell',
    mixins: [labelMixin, linkerMixin],
    data() {
        return {};
    },
    props: {
        extra: {
            type: String,
            default: '',
        },
        badge: {
            type: [String, Boolean],
            default: false,
        },
        reverse: {
            type: Boolean,
            default: false,
        },
        link: {
            type: Boolean,
            default: false,
        },
        flexReverse: {
            type: Boolean,
            default: false,
        },
    },
    computed: {
        hasLink() {
            return !!this.to || this.link;
        },
    },
};
</script>

<style lang="scss">
.cell-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: $padding;

    + .cell-item {
        border-top: 1px solid $color-border;
    }
    > .extra {
        order: 2;
        flex: 0 0 auto;
        color: $gray6;
    }
    > .badge {
        order: 3;
        flex: 0 0 auto;
    }

    &.flex-reverse {
        > .x-label,
        > .inner {
            flex: 0 0 auto;
        }
        > .extra {
            flex: 1 1 1%;
        }
    }

    &.reverse {
        > .x-label,
        > .inner {
            order: 2;
        }
        > .extra {
            order: 1;
        }
    }

    &.link {
        &:after {
            content: '\f012';
            @include make-icon;
            order: 4;
            color: $gray6;
            font-size: 80%;
            /*transform: translateX(100%);*/
        }
    }

    &.disabled {
        color: $gray5 !important;
    }
}
</style>
